<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="../../../css/style.css"> -->
  <link rel="stylesheet" href="css/coalmining.css">
  <title>涌水量预测</title>
  <script src="../../jquery/jquery-3.4.1.js"></script>
  <script src="../../echarts/echarts.min.js"></script>
  <script src="../../vue/js/vue.2.17.14.js"></script>
  <link rel="stylesheet" type="text/css" href="../../elementui/css/element-ui.2.13.1.css" />
  <script src="../../elementui/js/element-ui.2.4.11.js"></script>
  <script src="../../utils/index.js"></script>
  <script src="../../jquery/jquery-ui.min.js"></script>

  <!-- <script src="../../js/move.js"></script> -->
  <script>
    initFontSizeByParent()//初始化根字体大小	
  </script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      /* background-color: rgba(24, 86, 153, 0.8); */
      background-image: url(./img/bj.png);
      background-repeat: no-repeat;
      background-size: 104%;
      color: #fff;
      /* width: 100%; */
      height: 100%;
      font-size: 17px;
    }

    .title {
      font-size: 24px;
      text-align: left;
      padding: 15px 0px 3px 10px;
      /* background-color: #f4f4f4; */
      /* font-weight: bold; */
      border-bottom: 2px solid #0a8993;
      /* 添加下边框 */
      /* color: #17d0e1; */
    }

    .description {
      margin-top: -5%;
      font-size: 16px;
      /* text-align: center; */
      padding: 10px;
      /* background-color: #f4f4f4; */
      /* font-weight: bold; */
    }

    .container {
      display: flex;
      justify-content: space-between;
      /* background-color: aquamarine; */
    }

    .left-panel {
      width: 25%;
      margin: 40px;
      margin-top: 3%;
    }

    .center-panel {
      width: 40%;
      padding: 25px;
    }

    .right-panel {
      width: 15%;
      padding: 20px 0px 20px 20px;
    }

    .input-field {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
    }

    .input-field label {
      width: 12rem;
      text-align: right;
      margin-right: 10px;
      /* font-weight: bold; */
    }

    .input-field input {
      flex: 1;
      padding: 5px;
      width: 5rem;
      background-color: rgba(24, 86, 153, 0.2);
      border: 1px solid #167687;
      color: #fff;
    }

    .input-field input:focus {
      border-color: rgba(24, 86, 153, 0.2);
      background-color: rgba(24, 86, 153, 0.2);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    #modelInput {
      flex: 1;
      /* background-color: rgba(24, 86, 153, 0.2); */
      /* border: 1px solid #167687; */
      padding: 10px;
      width: 7rem;
      height: 0.5rem;
      /* Adjust height to fit your content */
      display: inline-flex;
      overflow: hidden;
      position: relative;
      top: 0%;
    }

    #modelInput .scroll-container {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      animation: scroll 10s linear infinite;
    }

    #modelInput .scroll-container div {
      height: 100%;
      line-height: 2rem;
      /* Adjust line-height to center text vertically */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes scroll {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(-100%);
      }
    }

    .error {
      color: #fff;
      display: block;
      /* margin-top: 5px; */
      /* width: 14rem; */
      font-size: 12px;
    }

    .output-box {
      border: 1px solid #167687;
      padding: 10px 0px 10px 0px;
      width: 7rem;
      height: 2rem;
      text-align: center;
      margin-left: 2rem;
      /* min-height: 50px; */
    }

    .center-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .model-field {
      width: 100%;
      margin-top: -3%;
      /* margin-bottom: 10px; */
      /* display: flex; */
      flex-direction: column;
      align-items: center;
    }

    .model-field-content {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      width: 100%;
    }

    .model-field-content label {
      width: 200px;
      text-align: right;
      margin-right: 10px;
      font-weight: bold;
    }

    .model-field-content input {
      flex: 1;
      padding: 5px;
    }

    #model img {
      width: 50vw;
      /* height: 58vh; */
      margin-top: 1%;
      margin-left: -13%;
    }

    .right-panel {
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* Vertically center align */
      align-items: center;
    }

    #calculateButtonWrapper {
      margin-bottom: 20px;
      width: 100%;
      text-align: center;
      margin-left: -1rem;
    }

    #calculateButton {
      display: inline-block;
      padding: 10px 20px;
      font-size: 15px;
      color: #ffffff;
      /* 白色文字 */
      /* background-color: #007bff; */
      background-image: url(./img/action-side-btn.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      /* 蓝色背景 */
      border: none;
      border-radius: 29px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    #calculateButton:hover {
      /* background-color: #0056b3; */
      background-image: url(./img/action-side-btn-hover.png);

    }

    #calculateButton:active {
      background-color: #87cefa;
      /* 鼠标按下时改变背景色 */
      box-shadow: 0 2px #666;
      /* 鼠标按下时改变阴影 */
      transform: translateY(2px);
      /* 鼠标按下时按下按钮 */
    }

    /* 自定义 WebKit 浏览器的滚动条 */
    ::-webkit-scrollbar {
      width: 4px;
      /* 滚动条的宽度 */
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgb(7, 93, 190);
      /* 滑块的颜色 */
      border-radius: 7px;
      /* 滑块的圆角 */
    }

    ::-webkit-scrollbar-track {
      background: #044171;
      /* 滚动条轨道的颜色 */
      /* height: 4px; */
    }

    .dialogClose {
      position: absolute;
      background-image: url(../../img/icon-close.png);
      right: 0;
      top: 2%;
      height: 4rem;
      width: 4rem;
      background-size: contain;
      cursor: pointer;
      z-index: 5;
    }

    .tab-container {
      display: flex;
      /* cursor: pointer; */
    }

    .tab {
      /* flex: 1; */
      /* text-align: center; */
      /* padding: 10px; */
      /* background-color: #f1f1f1; */
      /* border: 1px solid #ccc; */
      /* border-bottom: none; */
         cursor: pointer; 
    }

    .tab.active {
      /* background-color: #ddd; */
      font-weight: bold;
      color: #45e1e9;
    }

    .content {
      display: none;
      /* padding: 0; */
      /* border: 1px solid #ccc; */
    }

    .content.active {
      display: block;
    }

    #chartContainer {
      width: 95vw;
      height: 90vh;
    }

    select {
      width: 106px;
      /* 设置下拉框宽度 */
      padding: 5px;
      /* 内边距 */
      font-size: 14px;
      /* 字体大小 */
      color: #796060;
      /* 字体颜色 */
      background-color: rgba(24, 86, 153, 0.2);
      /* 背景颜色 */
      border: 1px solid #167687;
      /* 边框样式 */
      /* border-radius: 3px; */
      /* 圆角 */
      /* appearance: none; */
      /* 隐藏默认的下拉箭头 */
    }

    select option {
      background-color: rgb(203 210 212);
      /* 选项背景颜色 */
      color: rgb(46 48 47);
      /* 选项字体颜色 */
      padding: 5px;
      /* 选项内边距 */
    }
  </style>
</head>

<body id="mybody">
  <div class="tab-container title">
    <div class="tab active" data-target="content1" style="padding:0px 10px">涌水量多因素回归预测 </div>
    <div class="tab" data-target="content2" style=" border-left: 2px solid  #0a8993;padding-left: 10px;">涌水量多因素时间序列预测
    </div>
  </div>
  <span class="dialogClose"></span>
  <div id="content1" class="content active">
    <div class="container">
      <div class="left-panel">
        <div class="input-field">
          <!-- <label for="input1">月份:</label>
          <input type="text" id="input1" placeholder="请输入月份"> -->
          <label for="input1">月份:</label>
          <select id="input1">
            <option value="" disabled selected>请选择月份</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          <span class="error" id="error1"></span>
        </div>
        <div class="input-field">
          <label for="input2">单位走向开拓长度(km):</label>
          <input type="text" id="input2" placeholder="请输入长度">
          <span class="error" id="error2"></span>
        </div>
        <div class="input-field">
          <label for="input3">单位采空面积(万㎡):</label>
          <input type="text" id="input3" placeholder="请输入面积">
          <span class="error" id="error3"></span>
        </div>
        <div class="input-field">
          <label for="input4">降水量(mm):</label>
          <input type="text" id="input4" placeholder="请输入降水量">
          <span class="error" id="error4"></span>
        </div>
        <div class="input-field">
          <label for="input5">水位标高(m):</label>
          <input type="text" id="input5" placeholder="请输入高度">
          <span class="error" id="error5"></span>
        </div>
        <div class="input-field">
          <label for="input6">开采深度(m):</label>
          <input type="text" id="input6" placeholder="请输入深度">
          <span class="error" id="error6"></span>
        </div>
        <div class="input-field">
          <label for="input7">地表水补给量(万m³):</label>
          <input type="text" id="input7" placeholder="请输入补给量">
          <span class="error" id="error7"></span>
        </div>
      </div>
      <div class="center-panel">
        <div class="model-field">
          <span for="modelInput" style="margin-left: 22%">模型均方误差准确度:</span>
          <span type="text" id="modelInput" placeholder="">0.94</span>
          <div id="model">
            <img src="./img/yc.png" alt="模型图">
          </div>
        </div>
      </div>
      <div class="right-panel">
        <div id="calculateButtonWrapper">
          <button id="calculateButton">涌水量预测</button>
        </div>
        <div style=" display: flex;align-items: center;">
          <div class="output-box" id="output"></div>
          <span style="font-size: 20px"> &nbsp; m³/h</span>
        </div>
      </div>
    </div>
    <div class="description">&nbsp; &nbsp;
      使用机器学习模型对矿井涌水量进行多因素的回归预测，输入预测的月份、单位走向开拓长度、单位采空面积、降水量、水位标高、开采深度、地表水补给量可以得到对应的矿井涌水量预测结果。</div>
  </div>
  <div id="content2" class="content">
    <div id="chartContainer"></div>
  </div>
</body>
<script>
  $(document).ready(function () {
    // $("#mybody").draggable()
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', function () {
        // Remove active class from all tabs and contents
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'))
        document.querySelectorAll('.content').forEach(c => c.classList.remove('active'))

        // Add active class to clicked tab and target content
        this.classList.add('active')
        const targetContent = document.getElementById(this.getAttribute('data-target'))
        targetContent.classList.add('active')

        if (this.getAttribute('data-target') === 'content2') {
          // chart()
        }
      })
    })
    $('#calculateButton').click(function () {
      var allInputsFilled = true
      var inputs = {
        data: {
          month: '',
          unitExtensionLength: '',
          unitMinedOutArea: '',
          precipitation: '',
          waterLevelElevation: '',
          miningDepth: '',
          surfaceWaterReplenishment: ''
        }
      }

      for (var i = 1; i <= 7; i++) {
        var input = $('#input' + i).val()
        if (input === "" || (i === 1 && input === null)) {
          $('#error' + i).text('该字段不能为空')
          allInputsFilled = false
        } else {
          $('#error' + i).text('')
          switch (i) {
            case 1: inputs.data.month = [parseInt(input)]; break
            case 2: inputs.data.unitExtensionLength = [parseInt(input)]; break
            case 3: inputs.data.unitMinedOutArea = [parseInt(input)]; break
            case 4: inputs.data.precipitation = [parseInt(input)]; break
            case 5: inputs.data.waterLevelElevation = [parseInt(input)]; break
            case 6: inputs.data.miningDepth = [parseInt(input)]; break
            case 7: inputs.data.surfaceWaterReplenishment = [parseInt(input)]; break
          }
        }
      }
      if (allInputsFilled) {
        console.log(JSON.stringify(inputs), 'JSON.stringify(inputs)')
        // 发送POST请求
        fetch('/forecast/regression', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(inputs)
        })
          .then(response => response.json())
          .then(data => {
            $('#output').text(data)
          })
          .catch((error) => {
            console.error('Error:', error)
          })
      } else {
        $('#output').text('')
      }
    })
  })
  //滚动
  // const data = [
  //   "0.986629426", "0.942668021", "0.894182861", "0.851104438", "0.027379962",
  //   "0.811287165", "0.774331272", "0.739058733", "0.701558292", "0.026928393",
  //   "0.667250156", "0.635789096", "0.605984747", "0.577482104", "0.549316049",
  //   "0.522077322", "0.49596104", "0.471889108", "0.448527187", "0.426775128",
  //   "0.406174183", "0.385597378", "0.366154343", "0.348321289", "0.331806451",
  //   "0.316211253", "0.299847722", "0.284018695", "0.26993382", "0.256885648",
  //   "0.24498038", "0.233764946", "0.222316518", "0.210337594", "0.200174317",
  //   "0.191046581", "0.182500482", "0.173333004", "0.164422199", "0.156861886",
  //   "0.149365753", "0.141763881", "0.135869235", "0.129410148", "0.125038192",
  //   "0.118803233", "0.112050407", "0.106686808", "0.102158219", "0.099229902",
  //   "0.095488518", "0.090601571", "0.085731365", "0.081781775", "0.079133205",
  //   "0.076965906", "0.074281231", "0.070809931", "0.067050226", "0.06458047",
  //   "0.062932037", "0.061162695", "0.058492336", "0.057090949", "0.054198187",
  //   "0.052259762", "0.050537925", "0.049709335", "0.048418831", "0.046792883",
  //   "0.04458436", "0.04343833", "0.043661505", "0.04262213", "0.040072504",
  //   "0.03901466", "0.03952612", "0.038439259", "0.036803149", "0.036303863",
  //   "0.035398636", "0.035373151", "0.035309575", "0.033479288", "0.032433011",
  //   "0.03205689", "0.032294575", "0.03238399", "0.031111425", "0.030465191",
  //   "0.029701808", "0.02963317", "0.029973375", "0.029257966", "0.028772483",
  //   "0.02824045", "0.028368451", "0.028015399", "0.02733019", "0.027343391"]
  // const formattedData = data.map(num => parseFloat((Math.round(num * 100) / 100).toFixed(2)))
  // // Generate dynamic content
  // const $modelInput = $('#modelInput')
  // const $scrollContainer = $('<div class="scroll-container"></div>')

  // formattedData.forEach(item => {
  //   $scrollContainer.append(`<div>${item}</div>`)
  // })
  // $modelInput.append($scrollContainer)

  //点击标题切换
  $("#toggleSubtitle").click(function () {
    $("#content1").toggle()
    $("#content2").toggle()
  })
  $(".dialogClose").click(function () {
    parent.$('#yslycb').remove()
  })
</script>
<script>
  $(document).ready(function () {
    var monthData
    var s1data
    var monthData2
    var monthData1
    var s1data2
    var allXAxisData
    var yAxisData1Filled
    var yAxisData2Filled
    // jsonData()
    var params = {
      kjdm: parent.kjdmCode
    }
    $.ajax({
      url: '/apix/business/swgl_v2/getYslListByKjdm',
      type: 'get',
      data: params,
      contentType: 'application/json',
      success: function (response) {
        jsonData(response)
        // // 现有月份数组
        // monthData = response.data.月份
        // s1data = response.data.矿井涌水量
        // s1data2 = response.yuce.map(item => item.v_ysl)
        // monthData2 = response.yuce.map(item => item.v_ny)

        // // 合并所有 x 轴数据
        // allXAxisData = Array.from(new Set([...monthData, ...monthData2])).sort()
        // console.log(allXAxisData, '月份')

        // // 填充数据
        // yAxisData1Filled = allXAxisData.map(date => s1data[monthData.indexOf(date)] || null)
        // yAxisData2Filled = allXAxisData.map(date => s1data2[monthData2.indexOf(date)] || null)
        // console.log(yAxisData1Filled, yAxisData2Filled, '333')
        // // const hasData = response.data && response.data.yuce && response.data.yuce.length > 0
        // if (response.yuce) {
        //   chart()
        // } else {
        //   alert('数据不足无法预测')
        // }


        // // 检查字段是否有 null 值
        // checkForNullValues(response.data)
        // function checkForNullValues (data) {
        //   for (const [key, values] of Object.entries(data)) {
        //     if (values.some(value => value === null)) {
        //       console.log(`字段 "${key}" 存在 null 值`)
        //       // ElementPlus.ElMessage.success('数据不全无法预测请重新填写')
        //     } else {
        //       chart()
        //     }
        //   }
        // }
        // // 添加三个月
        // for (let i = 0; i < 3; i++) {
        //   let lastMonth = monthData[monthData.length - 1]
        //   let nextMonth = getNextMonth(lastMonth)
        //   monthData.push(nextMonth)
        // }
        console.log(monthData)
        // jsonData(response)
      },
      error: function (xhr, status, error) {
        // 处理错误
      }
    })
    function jsonData (res) {
      const url = '/forecast/time_serise'
      const processedData = {
        data: {
         CCTK:{
            'Month': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          "UnitDevelopmentLength": res.data["单位走向开拓长度"],
          "MinenflowVolume": res.data["矿井涌水量"],
          "UnitExcavatedArea": res.data["单位采空面积"],
          "Precipitation": res.data["降水量"],
          "WaterLevelElevation": res.data["水位标高"],
          "MiningDepth": res.data["开采深度"],
          "SurfaceWaterRecharge": res.data["地表水补给量"]
         }
        }
      }
      // 发送POST请求
      fetch('/forecast/time_serise', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(processedData)
      }).then(response=>response.json())
        .then(data2 => {
          const hasNull = Object.values(res.data).some(arr=>arr.includes(null))
          if(hasNull){
            alert('数据不足无法预测')
            return
          }else{
             for (let i = 0; i < 3; i++) {
          monthData1 = res.data.月份
          let lastMonth = monthData1[monthData1.length - 1]
          let nextMonth = getNextMonth(lastMonth)
          monthData1.push(nextMonth)
        }
            //console.log(data2,monthData1, 's1data2')
            // 现有月份数组
          monthData = res.data.月份
          s1data = res.data.矿井涌水量
          s1data2 =data2[parent.kjdmCode][0]
          monthData2 = monthData1.slice(-3)

          // 合并所有 x 轴数据
          allXAxisData = Array.from(new Set([...monthData, ...monthData2])).sort()
          //console.log(allXAxisData, '月份')

          // 填充数据
          yAxisData1Filled = allXAxisData.map(date => s1data[monthData.indexOf(date)] || null)
          yAxisData2Filled = allXAxisData.map(date => s1data2[monthData2.indexOf(date)] || null)
          //console.log(yAxisData1Filled, yAxisData2Filled, '333')
            chart()
          
          }
          
        })
        .catch((error) => {
          console.error('Error:', error)
        })

    }
    // 格式化月份为两位数
     function formatMonth (month) {
       return month < 10 ? `0${month}` : month
     }
     //获取下一个月份
     function getNextMonth (currentMonth) {
       let [year, month] = currentMonth.split('-').map(Number)
       month += 1
       if (month > 12) {
         month = 1
         year += 1
       }
       return `${year}-${formatMonth(month)}`
     }


    function chart (data) {
      // 初始化图表
      var chart = echarts.init(document.getElementById('chartContainer'))
      // var simulatedData = {
      //   xAxisData: monthData,
      //   xAxisData2: monthData2,
      // }
      // 配置图表选项
      const option = {
        title: {
          // text: '双 X 轴示例',
          textStyle: {
            color: '#FFFFFF' // 标题文字颜色
          }
        },
        tooltip: {
          trigger: 'axis'

        },
        legend: {
          data: ['实际值', '预测值'],
          textStyle: {
            color: '#FFFFFF' // 图例文字颜色
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {
              title: '保存为图片',
              pixelRatio: 2, // 控制图像分辨率
              backgroundColor: 'blue' // 背景色
            }
          }
        },
        xAxis: [

          {
            type: 'category',
            data: allXAxisData, //预测
            // position: 'top',
            axisLabel: {
              color: '#FFFFFF', // 第二 X 轴标签颜色
              // rotate: 45 // 旋转 X 轴标签以便更好地展示
            },
            axisLine: {
              lineStyle: {
                color: '#FFFFFF' // 第二 X 轴线条颜色
              }
            },
            axisPointer: {
              type: 'line'
            },
            offset: 0 // 与主 X 轴的距离
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(m³/h)',
            axisLabel: {
              color: '#FFFFFF' // Y 轴标签颜色
            },
            axisLine: {
              lineStyle: {
                color: '#FFFFFF' // Y 轴线条颜色
              }
            },
            splitLine: {
              lineStyle: {
                color: '#FFFFFF' // Y 轴分隔线颜色
              }
            }
          },

        ],
        series: [
          {
            name: '实际值',
            type: 'line',
            data: yAxisData1Filled,
            smooth: true, // 平滑曲线
            lineStyle: {
              color: 'rgba(255, 165, 0, 1)' // 线条颜色
            },
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)' // 数据点颜色
            }
          },
          {
            name: '预测值',
            type: 'line',
            // xAxisIndex: 1, // 使用第二 X 轴
            // yAxisIndex: 1, // 使用右侧 Y 轴
            // data: yAxisData2Filled,
            data: yAxisData2Filled,
            smooth: true, // 平滑曲线
            lineStyle: {
              color: 'rgba(0, 255, 0, 1)' // 线条颜色
            },
            itemStyle: {
              color: 'rgba(0, 255, 0, 1)' // 数据点颜色
            }
          }
        ]
      }

      option && chart.setOption(option)
      // 确保图表在窗口大小变化时能够重新计算尺寸
      $(window).resize(function () {
        chart.resize()
      })
    }

  });

</script>

</html>